<template>
  <!-- 成片预览 -->
  <a-modal
    v-if="$route.name == 'ComposeMaterial'"
    :visible="visible"
    @cancel="cancelClick"
    :footer="null"
    width="1400px"
    bodyStyle="padding:0;"
    :zIndex="1121"
  >
    <template #title>
      <div style="padding-right: 50px">
        {{ title }}
      </div>
    </template>
    <div class="box">
      <div class="content_box">
        <!-- 图片预览 -->
        <div
          class="swiper_con"
          v-if="type == 'image'"
          :style="{ height: '660px' }"
        >
          <swiper
            @slideChangeTransitionEnd="handleSwiperChange"
            direction="horizontal"
            :loop="false"
            :autoplay="{
              disableOnIntercation: false,
              autoplay: false,
              delay: 3000,
            }"
            :slidesPerView="1"
            :spaceBetween="0"
            :centeredSlides="false"
            :modules="modules"
          >
            <swiper-slide
              :style="{
                height: '660px',
              }"
              v-for="(item, index) in previewItem.image_ary"
              :key="index"
            >
              <div class="swiper_item">
                <img :src="item" alt="" />
              </div>
            </swiper-slide>
          </swiper>

          <div class="swiper_bottom">
            <a-progress
              status="exception"
              strokeColor="#2878FF"
              :showInfo="false"
              style="width: 20px; margin-left: 10px"
              :strokeWidth="3"
              v-for="(item, index) in swiperList"
              :key="index"
              :percent="item.percent"
            />
          </div>
        </div>
        <!-- <img :src="url" class="image" v-if="type == 'image'" /> -->
        <video
          v-if="visible && type == 'video'"
          :src="url"
          autoplay
          controls
          style="width: 100%; height: 660px"
        ></video>
        <audio
          v-if="visible && type == 'audio'"
          :src="url"
          autoplay
          controls
          style="width: 100%"
        ></audio>

        <div v-if="type == 'text'">
          <div>{{ url }}</div>
          <div class="footer">
            <a-space>
              <a-button
                @click="cancelClick"
                ghost
                type="primary"
                style="
                  border: 1px solid #e0e0e6;
                  color: #000;
                  border-radius: 6px;
                "
                >取消</a-button
              >
              <a-button
                type="primary"
                style="border: none; border-radius: 5px"
                @click="$utils.copyText(url)"
                >复制全部</a-button
              >
            </a-space>
          </div>
        </div>
      </div>

      <div class="Info_box">
        <a-tabs v-model:activeKey="activeKey">
          <a-tab-pane key="1" tab="基本信息">
            <div
              class="Info_item"
              v-for="(item, index) in initData"
              :key="index"
            >
              <div v-if="item.isshow" class="Info_item_content">
                <div class="item_title">{{ item.label }}</div>
                <div
                  class="item_content"
                  v-if="item.label !== '封面' && item.label !== '标签'"
                >
                  {{ item.value }}
                </div>
                <div v-if="item.label == '标签'" class="tags_box">
                  <a-tag
                    style="margin-top: 5px"
                    v-for="tag_item in item.value"
                    :key="tag_item.id"
                  >
                    {{ tag_item?.tag?.name }}</a-tag
                  >
                  <a-tag class="add_tag" @click="addTags">
                    <plus-outlined />
                    编辑标签
                  </a-tag>
                </div>
                <div class="" v-if="item.label == '封面'">
                  <video :src="item.value" style="height: 230px"></video>
                </div>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="属性" force-render>
            <div
              class="Info_item"
              v-for="(item, index) in initDataTwo"
              :key="index"
            >
              <div v-if="item.isshow" class="Info_item_content">
                <div class="item_title">{{ item.label }}</div>
                <div class="item_content">{{ item.value }}</div>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>

    <!-- 标签功能   成片预览暂时隐藏 -->
    <!-- <div class="tag_con" v-if="material_item?.bind_tags">
      <a-tag style="margin-top: 8px;" v-for="(tag_item) in material_item?.bind_tags"
        :key="tag_item.id">{{ tag_item?.tag?.name }}</a-tag>
      <a-tag style="cursor: pointer;margin-top: 8px;" @click="addTags">
        <PlusOutlined />添加
      </a-tag>
    </div> -->
  </a-modal>

  <!-- 素材预览 -->
  <a-modal
    v-else
    :visible="visible"
    @cancel="cancelClick"
    :footer="null"
    width="660px"
    :zIndex="1161"
  >
    <template #title>
      <div style="padding-right: 50px">
        {{ title }}
      </div>
    </template>
    <img :src="url" class="image" v-if="type == 'image'" />
    <video
      v-if="visible && type == 'video'"
      :src="url"
      autoplay
      controls
      style="width: 100%; max-height: 460px"
    ></video>
    <audio
      v-if="visible && type == 'audio'"
      :src="url"
      autoplay
      controls
      style="width: 100%"
    ></audio>
    <div v-if="type == 'text'">
      <div class="hide-scroller-bar" style="height: 500px; overflow: auto">
        {{ url }}
      </div>
      <div class="footer">
        <a-space>
          <a-button
            @click="cancelClick"
            ghost
            type="primary"
            style="border: 1px solid #e0e0e6; color: #000; border-radius: 6px"
            >取消</a-button
          >

          <a-button
            type="primary"
            style="border: none; border-radius: 5px"
            @click="$utils.copyText(url)"
            >复制全部</a-button
          >
        </a-space>
      </div>
    </div>

    <div class="tag_con" v-if="material_item?.bind_tags">
      <a-tag
        style="margin-top: 8px"
        v-for="tag_item in material_item?.bind_tags"
        :key="tag_item.id"
      >
        {{ tag_item?.tag?.name }}</a-tag
      >
      <a-tag style="cursor: pointer; margin-top: 8px" @click="addTags">
        <PlusOutlined />添加
      </a-tag>
    </div>
  </a-modal>

  <!-- 添加标签 -->
  <!-- <tagsModal :visible="tagVisible" :labelInfo="material_item" @close="closeTags" /> -->
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  createVNode,
  onMounted,
  watch,
} from "vue";
import request from "@/common/utils/request.js";
import { PlusOutlined } from "@ant-design/icons-vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay, Pagination } from "swiper/modules";
import "swiper/css";
const modules = [Autoplay, Pagination];
import { useTimeoutPoll } from "@vueuse/core";

import { useRoute, useRouter } from "vue-router";
import { message } from "ant-design-vue";
// 添加标签
// import tagsModal from '@/views/shotstack/MaterialCenter/modules/tagsModal.vue';

export default defineComponent({
  components: {
    PlusOutlined,
    Swiper,
    SwiperSlide,
    // tagsModal
  },
  name: "PreviewImg",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    url: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "",
    },
    material_item: {
      type: Object,
      default: () => {
        return {};
      },
    },
    previewItem: {
      type: Object,
      default: () => {},
    },
  },
  setup(props, { emit }) {
    const route = useRoute();

    const state = reactive({
      activeKey: "1",
      // 模拟数据
      initData: [
        {
          label: "标题",
          value: "",
          isshow: false,
        },
        {
          label: "板式",
          value: "",
          isshow: false,
        },
        {
          label: "发布状态",
          value: "",
          isshow: false,
        },
        {
          label: "添加者",
          value: "",
          isshow: false,
        },
        {
          label: "添加时间",
          value: "",
          isshow: false,
        },
        {
          label: "标签",
          value: "",
          isshow: false,
        },
        {
          label: "分类",
          value: "",
          isshow: false,
        },
        {
          label: "描述",
          value: "",
          isshow: false,
        },
        {
          label: "封面",
          value: "",
          isshow: false,
        },
      ],
      initDataTwo: [
        {
          label: "媒资类型",
          value: "",
          isshow: false,
        },
        {
          label: "文件大小",
          value: "",
          isshow: false,
        },
        {
          label: "文件格式",
          value: "",
          isshow: false,
        },
        {
          label: "分辨率",
          value: "",
          isshow: false,
        },
        {
          label: "码率",
          value: "",
          isshow: false,
        },
      ],
      tagVisible: false,

      // 轮播图相关
      swiperList: [],
      count: 100,
      currentIndex: 0,
    });

    const openTagModal = (flag) => {
      state.tagVisible = false;
      if (flag) {
        emit("addThisTags");
      }
    };

    const handleClose = () => {
      context.emit("close");
    };

    // == 轮播图相关
    const computePercent = () => {
      if (state.count < 3000) {
        state.count += 100;
        state.swiperList[state.currentIndex]["percent"] =
          (state.count / 3000) * 100;
      } else {
        pause();
      }
    };

    const { pause, resume } = useTimeoutPoll(computePercent, 100);

    const handleSwiperChange = (e) => {
      state.currentIndex = e.activeIndex;
      state.count = 100;
      state.swiperList.map((item) => {
        if (item.index == e.activeIndex) {
          item["percent"] = 100;
        } else {
          item["percent"] = 0;
        }
      });
      // if(state.swiperList?.length){
      // 	resume()
      // }
    };

    watch(
      () => props.previewItem,
      (nv, ov) => {
        if (props.type == "image" && route.name == "ComposeMaterial") {
          state.swiperList = [];
          state.count = 100;
          state.currentIndex = 0;
          state.swiperList = nv.image_ary.map((item, index) => {
            if (index == 0) {
              return {
                index,
                percent: 100,
              };
            } else {
              return {
                index,
                percent: 0,
              };
            }
          });
          // if(state.swiperList?.length){
          // 	resume()
          // }
        } else {
          // pause()
        }
      }
    );
    // ==  轮播图相关 end

    const cancelClick = () => {
      emit("onCancel");
    };

    const addTags = () => {
      emit("addTags");
    };

    watch(
      () => props.material_item,
      (val) => {
        if (val.id) {
          state.initData.forEach((item) => {
            if (item.label == "标题" && val.material_name != "") {
              item.value = val.material_name;
              item.isshow = true;
            }
            if (item.label == "发布状态" && val.use_release_text != "") {
              item.value = val.use_release_text;
              item.isshow = true;
            }
            if (item.label == "添加时间" && val.created_at != undefined) {
              item.value = val.created_at.slice(0, 10);
              item.isshow = true;
            }
            if (item.label == "标签") {
              // debugger
              item.value = val?.bind_tags || [];
              item.isshow = true;
            }
            if (item.label == "板式") {
              // debugger
              item.value = val?.aspectRatioName;
              item.isshow = true;
            }
            if (item.label == "封面" && val.material_url != "") {
              if (val.material_type == "video") {
                item.value = val.material_url;
                item.isshow = true;
              }
            }
          });

          state.initDataTwo.forEach((v1) => {
            if (v1.label == "媒资类型" && val.material_type != "") {
              if (val.material_type == "image") {
                v1.value = "图片";
              } else if (val.material_type == "video") {
                v1.value = "视频";
              } else {
                v1.value = "--";
              }
              v1.isshow = true;
            }
            if (v1.label == "文件大小" && val.material_size_text != "") {
              v1.value = val.material_size_text;
              v1.isshow = true;
            }
            if (v1.label == "文件格式" && val.material_extension != "") {
              v1.value = val.material_extension;
              v1.isshow = true;
            }
            if (v1.label == "分辨率" && val.width != 0 && val.height != 0) {
              v1.value = `${val.width}x${val.height}`;
              v1.isshow = true;
            }
          });
        }
      },
      {
        deep: true,
        immediate: true,
      }
    );

    return {
      ...toRefs(state),
      route,
      cancelClick,
      openTagModal,
      addTags,
      handleSwiperChange,
    };
  },
});
</script>

<style lang="less" scoped>
.image {
  width: 604px;
  height: 460px;
  object-fit: contain;
}

.footer {
  width: 100%;
  text-align: right;
  margin-top: 40px;
}

.tag_con {
  margin-top: 10px;
}

.box {
  display: flex;
  width: 100%;

  .content_box {
    flex: 1;
    max-width: calc(100% - 310px);
    background-color: #f2f3f3;
    padding: 20px 20px 10px 20px;

    .swiper_con {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      .swiper_bottom {
        position: absolute;
        width: 100%;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        left: 0;
        bottom: 10px;
        z-index: 999;
      }

      .swiper-slide {
        // width: 743px;
        height: 100%;
        transition: all 0.3s ease-in-out;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;

        .swiper_item {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            // max-width: 242px;
            max-height: 100%;
          }
        }
      }
    }
  }

  .Info_box {
    // flex: 1;
    // width: 20%;
    width: 370px;
    padding: 20px 20px;

    .Info_item {
      // display: flex;
      // color: #A9A9A9;
      // font-size: 12px;
      // width: 100%;
      // margin-bottom: 20px;
      .Info_item_content {
        display: flex;
        color: #a9a9a9;
        font-size: 12px;
        width: 100%;
        margin-bottom: 20px;

        .tags_box {
          flex: 1;
          display: flex;
          flex-wrap: wrap;

          .add_tag {
            margin-top: 5px;
            cursor: pointer;

            &:hover {
              background-color: #e8f4ff;
              color: #1664ff;
            }
          }
        }
      }

      .item_title {
        width: 20%;
        margin-right: 50px;
      }

      .item_content {
        width: calc(80% - 50px);
        color: #000;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
    }
  }
}
//  ss-notification-topRight
:deep(.ss-notification-notice) {
  z-index: 9999 !important;
}
:deep(.ss-notification-notice-closable) {
  z-index: 9999 !important;
}
:deep(.ss-notification) {
  z-index: 9999 !important;
}
:deep(.ss-notification-topRight) {
  z-index: 9999 !important;
}
</style>
